import { ProFormInstance } from "@ant-design/pro-components";
import { Button, Drawer, Flex, Form, FormProps, Input } from "antd";
import { useCallback, useEffect, useRef, useState } from "react";
import * as api from '../../../api';


type FieldType = {
    id?: string;
    title?: string;
    remember?: string;
};

export function PageConfig() {
    const formRef = useRef<ProFormInstance>();
    const [open, setOpen] = useState(false);

    const [form] = Form.useForm();

    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };

    const init = useCallback(() => {
        api.getConfig().then((res) => {
            console.log(res)
            console.log('formRef.current', formRef.current)
            form.setFieldsValue({
                id: res.data.data.id,
                title: res.data.data.title
            })
        })
    }, [form]);

    const setConfig = (values) => {
        api.setConfig(values).then((res) => {
            console.log(res)
            onClose()
        })
    }

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        setConfig(values)
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    useEffect(() => {
        if (open) {
            init();
        }
    }, [open, init])

    return (
        <>
            <Button style={{ marginRight: 10 }} onClick={showDrawer}>页面配置</Button>
            <Drawer size='large' title="页面配置" onClose={onClose} open={open}>
                <Form
                    form={form}
                    name="basic"
                    layout='vertical'
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        label="id"
                        name="id"
                        rules={[{ required: true }]}
                    >
                        <Input disabled />
                    </Form.Item>

                    <Form.Item<FieldType>
                        label="页面标题"
                        name="title"
                        rules={[{ required: true, message: '页面标题不能为空' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label={null}>
                        <Flex gap="small" wrap>
                            <Button type="default" htmlType="button" onClick={onClose}>
                                取消
                            </Button>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                        </Flex>
                    </Form.Item>

                </Form>
            </Drawer>
        </>
    );
}